
<!--  / banner  -->
<div class="banner"> 
	<div class="bannerImg">
		<img class="hidden-xs" src="__CDN__{$ads.image}" alt="" width="100%">
		<img class="visible-xs" src="__CDN__{$ads.image_wap}" alt="" width="100%">
	</div>
<!--	<div class="bannerTxt container white">-->
<!--		<h6>海量网站等你选择</h6>-->
<!--		<p>拥有一个属于您得高品质网站，从现在开始</p>-->
<!--	</div>-->
</div>
<!--  / banner  -->

<!--  / warpper  -->
<main class="warpper">

	<div class="caseSec1 padding80">
		<div class="container">
			<div class="comment_title">
				<h6>案例推荐</h6>
			</div>
<!--			<ul class="caseSec1_classify marginTop60">-->
<!--				<li class="on">全部案列</li>-->
<!--				<li>微信小程序</li>-->
<!--				<li>企业网站</li>-->
<!--				<li>APP应用</li>-->
<!--				<li>MSI管理系统</li>-->
<!--				<li>ERP管理系统</li>-->
<!--			</ul>-->
			{notempty name='$project_recommend'}
			<div class="caseSec1_con marginTop60">
				<div class="caseSec1_img">
					<img src="__CDN__{$project_recommend.image}" alt="" width="100%">
				</div>
				<div class="caseSec1_txt">
					<h6>{$project_recommend.title}</h6>
					<p>{$project_recommend.desc}</p>
					<a class="comment_btn" href="{:url('index/index/caseDetail')}?id={$project_recommend.id}">前往预览</a>
				</div>
			</div>
			{/notempty}
		</div>
	</div>

	<div class="caseSec2 padding80">
		<div class="container">
			<div class="caseSec2_con">
				<div class="caseSec2_txt">
					<h5>微享网站定制</h5>
					<h6>丰富的<br>经典案例</h6>
					<p>扫描右方二维码，联系我们开始定制属于你的网站吧</p>
				</div>
				<div class="caseSec2_img">
					<img src="__CDN__{$Think.config.site.wechat_code}" alt="" width="100%">
				</div>
			</div>
		</div>
		<div class="swiper-container caseSwiper marginTop60">
			<div class="swiper-wrapper">
				{notempty name='$ads_case_1'}
				{foreach $ads_case_1 as $vo}
				<div class="swiper-slide">
					<a href="javascript:;" class="caseSwiper_img">
						<div style="background: url(__CDN__{$vo.image}) center/cover no-repeat;"></div>
					</a>
				</div>
				{/foreach}
				{/notempty}
			</div>
		</div>
	</div>

	<div class="caseSec3">
		<div class="swiper-container aboutSwiper padding80">
			<div class="swiper-wrapper">
				{notempty name='$ads_case_2'}
				{foreach $ads_case_2 as $vo}
				<div class="swiper-slide">
					<a href="javascript:;" class="aboutSec7_img">
						<img src="__CDN__{$vo.image}" alt="" width="100%">
					</a>
				</div>
				{/foreach}
				{/notempty}
			</div>
		</div>
	</div>

	<div class="caseSec4 padding80">
		<div class="container">
			<div class="comment_title">
				<h6>全部案例</h6>
			</div>
			<ul class="caseSec1_classify marginTop60">
				<li {if $cate_id == 0} class="on" {/if}><a href="{:url('index/index/case')}">全部案列</a></li>
				{notempty name='$category'}
				{foreach $category as $vo}
				<li {if $cate_id == $vo.id} class="on" {/if}><a href="{:url('index/index/case',['cate_id' => $vo['id']])}">{$vo.name}</a></li>
				{/foreach}
				{/notempty}
			</ul>
			{notempty name="$project_page_list"}
			<ul class="caseSec4_list marginTop60 transitionDelay2">
				{foreach $project_page_list as $vo}
				<li>
					<a href="{:url('index/index/caseDetail')}?id={$vo.id}" class="caseSec4_img">
						<img src="__CDN__{$vo.image}" alt="" width="100%">
					</a>
				</li>
				{/foreach}
			</ul>
<!--			/Users/lukai/project/gaoding/thinkphp/library/think/paginator/driver/Bootstrap.php-->
			<div>{$project_page_list->render()}</div>
<!--			<ul class="caseSec4_page marginTop60">-->
<!--				<li>-->
<!--					<a href="javascript:;"><<</a>-->
<!--				</li>-->
<!--				<li class="on">-->
<!--					<a href="javascript:;">1</a>-->
<!--				</li>-->
<!--				<li>-->
<!--					<a href="javascript:;">2</a>-->
<!--				</li>-->
<!--				<li>-->
<!--					<a href="javascript:;">3</a>-->
<!--				</li>-->
<!--				<li>-->
<!--					<a href="javascript:;">>></a>-->
<!--				</li>-->
<!--			</ul>-->
			{/notempty}
		</div>
	</div>

</main>
<!--  / warpper  --> 

<script>
$(function() {

	// 案例分类切换
	$('body').on('click','.caseSec1_classify li',function(){
		$(this).addClass('on').siblings().removeClass('on');
	})

	var caseSwiper = new Swiper('.caseSwiper', {
		loop: true,
		speed: 600,
		observer: true,
		observeParents: true,
		autoplay: 3000,
		autoplayDisableOnInteraction: false,
		slidesPerView: 2.5,
		slidesPerGroup: 1,
		spaceBetween: 120,
		centeredSlides: true,
		paginationClickable: true,
		breakpoints: { 
		    1440: {
				spaceBetween: 60,
		    },
		    768: {
				spaceBetween : 20,
				slidesPerView: 1,
				centeredSlides: false,
		    },
		}
	})

	var aboutSwiper = new Swiper('.aboutSwiper', {
		loop: true,
		speed: 600,
		observer: true,
		observeParents: true,
		autoplay: 3000,
		slidesPerView: 'auto',
		slidesPerGroup: 1,
		autoplayDisableOnInteraction: false,
		spaceBetween: 80,
		centeredSlides: true,
		breakpoints: { 
		    1440: {
				spaceBetween : 60,
		    },
		    768: {
				slidesPerView: 2,
				slidesPerGroup: 2,
				spaceBetween : 10,
				centeredSlides: false,
		    },
		}
	})

})

$(window).ready(function(){
	$('.headerNav li').eq(3).addClass('on');
})
$(window).load(function(){
	
})
$(window).resize(function(){
	
})

$(window).scroll(function () {
    var h = $(window).scrollTop()
    
    if (h > $('.banner').offset().top + 200 && h < $('.caseSec1').offset().top) {
        $('.caseSec1').addClass('on')
    } else if (h > $('.caseSec1').offset().top + 200 && h < $('.caseSec2').offset().top - $('.caseSec2').outerHeight(true)/4) {
        $('.caseSec2').addClass('on')
    } else if (h > $('.caseSec2').offset().top + 200 && h < $('.caseSec3').offset().top - $('.caseSec3').outerHeight(true)/4) {
        $('.caseSec3').addClass('on')
    } else if (h > $('.caseSec3').offset().top + 200 && h < $('.caseSec4').offset().top - $('.caseSec4').outerHeight(true)/4) {
        $('.caseSec4').addClass('on')
    }
})

</script>
